<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>已付款合同</title>
  <link rel="stylesheet" type="text/css" href="../static/css/bootstrap.css"/>
  <link rel="stylesheet" href="/static/css/index.css">
  <style>
    tr td, table {
      border: 1px solid #000;
      border-collapse: collapse;
      text-align: center;
    }

    #tr1 {
      color: blue;
    }

    #top {
      margin-left: 100px;
      margin-top: 100px;
    }

    　　tr:nth-child(2n) {
      　　　　background-color: #2AABD2;
    }

    　　tr:nth-child(2n+1) {
      　　　　background-color: #3E8F3E;
    }


  </style>
</head>
<body>

<div id="top">

  <table width="900px">
    <tr class="panel-footer">
      <td>
        客户名称：<input type="text" v-model="check.name">
        合同类型：<select v-model="check.type">
        <option value="原始合同">原始合同</option>
        <option value="续费合同">续费合同</option>
      </select>
        签约日期：<input type="date" v-model="check.startTime">至
        <input type="date" v-model="check.endTime">
        <button type="button" class="btn btn-default" @click="checkInfo">合同检索</button>
      </td>
    </tr>
    <tr>
      <td>
        合同范围：<input type="radio" name="scope">我的合同
        <input type="radio" name="scope" checked>全部合同
      </td>
    </tr>
    <tr>
      <td>
        <table width="900px" class="panel-footer">
          <tr id="tr1" vclass="panel-footer">
            <td>合同编号</td>
            <td>买房名称</td>
            <td>卖方名称</td>
            <td>合同金额</td>
            <td>签约日期</td>
            <td>合同状态</td>
          </tr>
          <tr v-for="(value,index) in contract">
            <td><a href="#" @click="showInfo(value.id)">{{value.id}}</a></td>
            <td>{{value.sellName}}</td>
            <td>{{value.buyName}}</td>
            <td>￥{{value.money}}</td>
            <td>{{value.startDate}}</td>
            <td>{{value.paystate}}</td>
          </tr>
        </table>
      </td>
    </tr>
    <tr class="panel-footer">
      <td>
        <nav aria-label="Page navigation">
          <ul class="pagination" >
            <li>
              <a href="#" aria-label="Previous" :style="style2" @mouseover="previous" @click="previous1">
                <span aria-hidden="true">&laquo;</span>
              </a>
            </li>
            <li v-for="(value,index) in totalPage">
              <a href="#" @click="getNowPage(index)">{{index+1}}</a>
            </li>
            <li>
              <a href="#" aria-label="Next" :style="style3" @mouseover="next" @click="next1">
                <span aria-hidden="true">&raquo;</span>
              </a>
            </li>
            <li>
              <a href="#" aria-label="Next" :style="style3" @mouseover="next" @click="next1">
                <span aria-hidden="true">共{{totalPage}}页, {{page}}条</span>
              </a>
            </li>
          </ul>
        </nav>
      </td>
    </tr>
    <tr v-show="isShow">
      <td >
        <button type="button" class="btn btn-default" @click="deleteInfo">删除合同</button>
        <button type="button" class="btn btn-default" @click="editUserDialog">修改合同状态</button>
      </td>

    </tr>

    <tr v-show="isShow">
      <td >
        合同类型：<input type="text" v-model="contractInfo.type"><br>
        合同编号：<input type="text" v-model="contractInfo.id"><br>
        付款金额：<input type="text" v-model="contractInfo.money"><br>
        合同状态：<input type="text" v-model="contractInfo.paystate"><br>
        签约日期：<input type="text" v-model="contractInfo.startDate"><br>
        结束日期：<input type="text" v-model="contractInfo.endDate"><br>
        付款方式：<input type="text" v-model="contractInfo.payway">
      </td>

    </tr>
    <tr v-show="isShow">
      <td>

        <table style="float: left;margin-left: 100px;margin-right: 150px" class="btn btn-default">

          <tr>
            <td>
              <input type="button" value="卖方（乙方）">
            </td>
          </tr>
          <tr>
            <td>
              公司名称：<input type="text" v-model="contractInfo.buyName">
            </td>
          </tr>
          <tr>
            <td>
              公司地址：<input type="text" v-model="contractInfo.buyAddress">
            </td>
          </tr>
          <tr>
            <td>
              联系电话：<input type="tel" v-model="contractInfo.buyName">
            </td>
          </tr>
          <tr>
            <td>
              公司邮箱：<input type="email" v-model="contractInfo.buyEmail">
            </td>
          </tr>
          <tr>
            <td>
              公司网址：<input type="url" v-model="contractInfo.buyUrl">
            </td>
          </tr>
          <tr>
            <td>
              负责人 &nbsp;：<input type="text" v-model="contractInfo.buyUser">
            </td>
          </tr>
          <tr>
            <td>
              负责人电话：<input type="tel" v-model="contractInfo.buyUserTel">
            </td>
          </tr>
          <tr>
            <td>
              负责人邮箱：<input type="email" v-model="contractInfo.buyUserEmail">
            </td>
          </tr>

        </table>

        <table class="btn btn-default">
          <tr>
            <td>
              <input type="button" value="买方（甲方）">
            </td>
          </tr>
          <tr>
            <td>
              公司名称：<input type="text" v-model="contractInfo.sellName">
            </td>
          </tr>
          <tr>
            <td>
              公司地址：<input type="text" v-model="contractInfo.sellAddress">
            </td>
          </tr>
          <tr>
            <td>
              联系电话：<input type="tel" v-model="contractInfo.sellTel">
            </td>
          </tr>
          <tr>
            <td>
              公司邮箱：<input type="email" v-model="contractInfo.sellEmail">
            </td>
          </tr>
          <tr>
            <td>
              公司网址：<input type="url" v-model="contractInfo.sellUrl">
            </td>
          </tr>
          <tr>
            <td>
              负责人&nbsp; ：<input type="text" v-model="contractInfo.sellUser">
            </td>
          </tr>
          <tr>
            <td>
              负责人电话：<input type="tel" v-model="contractInfo.sellUserTel">
            </td>
          </tr>
          <tr>
            <td>
              负责人邮箱：<input type="email" v-model="contractInfo.sellUserEmail">
            </td>
          </tr>

        </table>
      </td>

    </tr>
  </table>


  <el-dialog :visible.sync="editDialogVisible" title="修改合同状态" @close="closeEditDialog" width="500px" center>
    <el-form ref="form"  label-width="120px">
      <el-form-item label="支付状态:">
        <el-select v-model="paystate" placeholder="请选择">
          <el-option v-for="item in paystates"  :label="item" :value="item">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" size="small" @click="updateContract">确认</el-button>
                    <el-button type="primary" size="small" @click="closeEditDialog">取消</el-button>
                </span>
    </template>
  </el-dialog>
</div>
<script src="../static/js/vue.js"></script>
<script src="../static/js/axios.min.js"></script>
<script src="/static/js/index.js"></script>
<script>
  new Vue({
    el: "#top",
    data: {
      check: {
        name: '',
        type: '',
        startTime: '',
        endTime: '',
      },
      who: '',
      contract: {
        id: '',
        sellName: '',
        buyName: '',
        money: '',
        startDate: '',
        paystate: '',
      },
      contractInfo: {},
      totalPage:'',
      nowPage:'1',
      style1:'pointer-events:none',
      style2:'',
      style3:'',
      page:'',
      editDialogVisible: false,
      paystate:'',
      paystates:['未付款','已付款','已付清'],
      isShow:false,


    },
    methods: {
      //查询当前页的数据
      getAll() {
        axios.get("/getPaidInfo.Contract?nowPage="+this.nowPage).then(response => {
          let data = response.data;
          console.log(data)
          this.page = data.key
          this.totalPage =  Math.ceil(Number(data.key)/5)
          this.contract = data.value;
        })
      },
      //根据id删除合同信息
      deleteInfo(){
        this.$confirm(
                '是否删除该合同！',
                '提示',
                {confirmButtonText: '确定',
                  cancelButtonText: '取消',
                }).then(() => {
          this.deleteContract();
        }).catch((err) => {
          this.$message({
            message: '合同删除已取消！！',
            type: 'warning'
          });
        });

      },
      deleteContract(){
        axios.get("/deleteById.Contract?id="+this.contractInfo.id).then(response =>{
          if (response.data.key == '1'){
            this.$message({
              type: 'success',
              message: '合同删除成功'

            });
            this.getAll();
          }else {
            this.$message({
              message: '合同删除失败！',
              type: 'warning'
            });
          }
        })
      },
      closeEditDialog() {
        this.editDialogVisible = false
      },
      updateContract(){
        this.contractInfo.paystate = this.paystate
        this.realUpdateContract();
      },
      realUpdateContract(){
        axios.get("/updateContractById.Contract?id="+this.contractInfo.id+"&paystate="+this.contractInfo.paystate).then(response =>{
          if (response.data.key == '1'){
            this.$message({
              type: 'success',
              message: '合同状态修改成功'

            });
            this.getAll();
          }else {
            this.$message({
              message: '合同状态修改失败！',
              type: 'warning'
            });
          }
        })
      },

      editUserDialog() {
        this.editDialogVisible = true
      },
      getNowPage(res){
        this.nowPage = res+1;
        this.getAll();
        this.previous();
        this.next();
      },
      previous(){
        if (this.nowPage == '1'){
          this.style2 = this.style1
        }else {
          this.style2 = ''
        }
      },
      previous1(){
        this.next();
        this.previous();
        this.nowPage = this.nowPage - 1;
        this.getAll();
      },
      next(){
        if (this.nowPage == this.totalPage){
          this.style3 = this.style1
        }else {
          this.style3 = ''
        }
      },
      next1(){
        this.previous();
        this.next();
        this.nowPage = this.nowPage + 1;
        this.getAll();
      },
      showInfo(res) {
        this.isShow = true
        axios.get("/getInfoById.Contract?id=" + res).then(response => {
          let data = response.data;
          console.log(data)
          this.contractInfo = data.value;
        })
      },
      checkInfo() {

        axios.get("/checkInfo.Contract?type=" + this.check.type + "&name=" + this.check.name + "&startTime=" + this.check.startTime + "&endTime=" + this.check.endTime+"&nowPage="+this.nowPage).then(response => {
          let data = response.data;
          console.log(data)
          if (data.key != '0') {
            console.log("查询成功----")
            this.page = data.key
            this.totalPage =  Math.ceil(Number(data.key)/5)
            this.contract = data.value;
          } else {
            console.log("查询失败")
          }
        })
      }
    },
    created(){
      this.getAll();
      this.previous();
      this.next();
      this.$message({
        type: 'success',
        message: '点击合同编号，即可查看合同详细信息！'

      });
    },

  })
</script>
</div>

</body>
</html>